<template>
  <div>
    <el-button type="primary" size="small" @click="addKey">新增联合</el-button>
    <el-table
      v-if="combinedStoreKeys.length > 0"
      class="mar-top-20 mar-btm-10"
      style="width: 100%"
      :data="combinedStoreKeys"
      size="medium"
      show-header border fit>
      <el-table-column prop="srcStoreKey" label="srcStoreKey" :min-width="minWidth">
        <template slot-scope="scope">
          <el-select v-model="scope.row.srcStoreKey" clearable filterable size="small" placeholder="srcStoreKey"
                     @change="srcStoreKeyChanged(scope.$index)">
            <el-option :label="storeKey.storeKey" :value="storeKey.storeKey" :key="idx"
                       v-for="(storeKey, idx) in storeKeyOptions">
              <span>{{storeKey.storeKey}}</span>
              <span class="mar-lft font-color-warning">{{storeKey.storeKeyAlias || ''}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="destStoreKey" label="destStoreKey" :min-width="minWidth">
        <template slot-scope="scope">
          <el-input v-model="scope.row.destStoreKey" size="small" placeholder="destStoreKey"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="flatFields" label="flatFields" :min-width="minWidth">
        <template slot-scope="scope">
          <el-select v-model="scope.row.flatFields" multiple clearable filterable collapse-tags size="small"
                     placeholder="flatFields">
            <el-option :label="paramKey.paramKey" :value="paramKey.paramKey" :key="idx"
                       v-for="(paramKey, idx) in paramKeyOptions">
              <span>{{paramKey.paramKey}}</span>
              <span class="mar-lft font-color-warning">{{paramKey.paramAlias || ''}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="uniqueKey" label="uniqueKey" :min-width="minWidth">
        <template slot-scope="scope">
          <el-select v-model="scope.row.uniqueKey" clearable filterable size="small" placeholder="uniqueKey">
            <el-option :label="paramKey.paramKey" :value="paramKey.paramKey" :key="idx"
                       v-for="(paramKey, idx) in paramKeyOptions">
              <span>{{paramKey.paramKey}}</span>
              <span class="mar-lft font-color-warning">{{paramKey.paramAlias || ''}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="npKey" label="npKey" :min-width="minWidth">
        <template slot-scope="scope">
          <el-select v-model="scope.row.npKey" clearable filterable size="small" placeholder="npKey">
            <el-option :label="paramKey.paramKey" :value="paramKey.paramKey" :key="idx"
                       v-for="(paramKey, idx) in paramKeyOptions">
              <span>{{paramKey.paramKey}}</span>
              <span class="mar-lft font-color-warning">{{paramKey.paramAlias || ''}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="npKeyFields" label="npKeyFields" :min-width="minWidth">
        <template slot-scope="scope">
          <el-select v-model="scope.row.npKeyFields" multiple clearable filterable collapse-tags size="small"
                     placeholder="npKeyFields">
            <el-option :label="paramKey.paramKey" :value="paramKey.paramKey" :key="idx"
                       v-for="(paramKey, idx) in paramKeyOptions">
              <span>{{paramKey.paramKey}}</span>
              <span class="mar-lft font-color-warning">{{paramKey.paramAlias || ''}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="unionUniqueKeys" label="unionUniqueKeys" :min-width="minWidth">
        <template slot-scope="scope">
          <el-select v-model="scope.row.unionUniqueKeys" multiple clearable filterable collapse-tags size="small"
                     placeholder="unionUniqueKeys">
            <el-option :label="paramKey.paramKey" :value="paramKey.paramKey" :key="idx"
                       v-for="(paramKey, idx) in paramKeyOptions">
              <span>{{paramKey.paramKey}}</span>
              <span class="mar-lft font-color-warning">{{paramKey.paramAlias || ''}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text" size="medium" class="font-color-success"
            @click="copyParamMap(scope.$index)">复制
          </el-button>
          <el-button
            type="text" size="medium" class="font-color-danger"
            @click="deleteKey(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {confirmHandle, deepCopyWithJson} from "@/utils";

  export default {
    name: "CombinedStoreKey",
    props: {
      combinedStoreKeys: {
        default: () => {
          return []
        }
      },
      genCommInfo: {
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {
        minWidth: '200px',
        paramKeyOptions: [],
        storeKeyOptions: []
      }
    },
    watch: {
      genCommInfo() {
        this.paramKeyOptions = [];
        this.storeKeyOptions = [];
        _.union(this.genCommInfo.controlParams || [], this.genCommInfo.statusParams || []).forEach(p => {
          // lodash 4.xx : _.pluck (remove) => _.map
          if (p.paramKey && !_.map(this.paramKeyOptions || [], 'paramKey').includes(p.paramKey)) {
            this.paramKeyOptions.push(p)
          }
          if (p.storeKey && !_.map(this.storeKeyOptions, 'storeKey').includes(p.storeKey)) {
            this.storeKeyOptions.push(p)
          }
        });
      }
    },
    methods: {
      addKey() {
        //如果是新增通用方法就没有必要判断了
        // if (_.isEmpty(this.genCommInfo)) {
        //   this.$notify({
        //     message: '请先选择通用命令，并确保可选参数不为空!',
        //     type: 'warning',
        //     duration: 3000,
        //   });
        //   return
        // }
        this.combinedStoreKeys.push({
          srcStoreKey: '',
          destStoreKey: '',
          flatFields: [],
          uniqueKey: '',
          npKey: '',
          npKeyFields: [],
        });
      },
      copyParamMap(idx) {
        const src = deepCopyWithJson(this.combinedStoreKeys[idx]);
        this.combinedStoreKeys.splice(idx, 0, src);
      },
      deleteKey(idx) {
        const storeKey = this.combinedStoreKeys[idx];
        if (storeKey.srcStoreKey) {
          confirmHandle({label: `确定要删除 ${storeKey.srcStoreKey} 联合storeKey吗?`}).then(() => {
            this.combinedStoreKeys.splice(idx, 1);
          }).catch(() => {
          });
        } else {
          this.combinedStoreKeys.splice(idx, 1);
        }
      },
      srcStoreKeyChanged(idx) {
        const storeKey = this.combinedStoreKeys[idx];
        if (!storeKey) return;
        storeKey.destStoreKey = `${storeKey.srcStoreKey}_combined`
      }
    },
  }
</script>

<style scoped>

</style>
